<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, i) in list"
        :key="i"
        :title="item.title"
        :to="'/article/' + item.art_id"
      />
    </van-list>
  </div>
</template>

<script>
import { search } from '@/api/search'
export default {
  name: 'searchResult',

  props: {
    // 搜索关键字
    searchKey: {
      required: true,
      type: String
    }
  },

  data () {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      finished: false
    }
  },

  mounted () {},

  methods: {
    // List组件的 load事件触发时机：
    // 初次加载时  触底加载时
    async onLoad () {
      // 发送请求到服务器，获取搜索文章结果数据
      const res = await search(this.searchKey, this.page, this.pageSize)
      console.log(res)
      this.list.push(...res.data.data.results)

      this.loading = false

      // 如果 返回数组的长度 < 页容量，则 不需要再触底请求了，因为都加载光了
      if (res.data.data.results.length < this.pageSize) this.finished = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
